import React from 'react';
import { Card, Table, Tag, Button, Space, Breadcrumb, Rate } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { HomeOutlined, FileTextOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import styles from './Evaluation.module.less';

type EvaluationStatus = 'pending' | 'processing' | 'completed';

interface EvaluationItem {
  id: string;
  projectName: string;
  projectCode: string;
  status: EvaluationStatus;
  score?: number;
  evaluator?: string;
  evaluateTime?: string;
  comments?: string;
}

const statusMap = {
  pending: { text: '待评价', color: 'orange' },
  processing: { text: '评价中', color: 'blue' },
  completed: { text: '已完成', color: 'green' }
} as const;

const Evaluation: React.FC = () => {
  const columns: ColumnsType<EvaluationItem> = [
    {
      title: '项目名称',
      dataIndex: 'projectName',
      key: 'projectName',
    },
    {
      title: '项目编号',
      dataIndex: 'projectCode',
      key: 'projectCode',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: EvaluationStatus) => {
        const { text, color } = statusMap[status];
        return <Tag color={color}>{text}</Tag>;
      },
    },
    {
      title: '评分',
      dataIndex: 'score',
      key: 'score',
      render: (score) => (
        score ? (
          <Rate 
            disabled 
            defaultValue={score} 
            count={5}
            style={{ fontSize: 14 }}
          />
        ) : '-'
      ),
    },
    {
      title: '评价人',
      dataIndex: 'evaluator',
      key: 'evaluator',
    },
    {
      title: '评价时间',
      dataIndex: 'evaluateTime',
      key: 'evaluateTime',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space>
          <Button 
            type="link" 
            icon={<FileTextOutlined />}
            disabled={record.status === 'completed'}
          >
            开始评价
          </Button>
          {record.status === 'completed' && (
            <Button type="link">查看详情</Button>
          )}
        </Space>
      ),
    },
  ];

  const data: EvaluationItem[] = [
    {
      id: '1',
      projectName: '示范区档案管理项目',
      projectCode: 'PRJ001',
      status: 'completed',
      score: 4.5,
      evaluator: '张三',
      evaluateTime: '2024-03-20 14:30',
      comments: '项目整体完成情况良好，档案管理规范'
    },
    {
      id: '2',
      projectName: '数字档案馆建设项目',
      projectCode: 'PRJ002',
      status: 'processing',
      evaluator: '李四'
    },
    {
      id: '3',
      projectName: '档案信息化升级项目',
      projectCode: 'PRJ003',
      status: 'pending'
    }
  ];

  return (
    <MainLayout>
      <div className={styles.breadcrumb}>
        <Breadcrumb items={[
          {
            title: <Link to="/home"><HomeOutlined /> 首页</Link>,
          },
          {
            title: '总结备案',
          },
          {
            title: '考核评价',
          }
        ]} />
      </div>

      <Card 
        title="考核评价" 
        className={styles.evaluationCard}
        extra={
          <Space>
            <Button>导出评价报告</Button>
            <Button type="primary">批量评价</Button>
          </Space>
        }
      >
        <Table
          columns={columns}
          dataSource={data}
          rowKey="id"
          pagination={{
            pageSize: 10,
            showTotal: total => `共 ${total} 条`
          }}
        />
      </Card>
    </MainLayout>
  );
};

export default Evaluation; 